<template>
  <swiper
    class="swiper"
    :indicator-dots="indicatorDots"
    :autoplay="autoplay"
    :duration="duration"
    :vertical="vertical"
    :circular="circular"
    @animationfinish="videoAnimationfinish"
    @change="change"
    @transiton="transition"
    style="height:100%"
  >
    <template v-if="videoListAll[parseInt(videoIndex / 10)]">
      <swiper-item 
        v-for="(item, index) in videoListAll[parseInt(videoIndex / 10)]"
        :key="item.articleId"
        @catchtouchmove="catchTouchMove"
        v-show="total -1 >= videoIndex >= 0">
        <VideoItemVX
          :videoDetail="item"
          :current="current_"
          :videoIndex="index"
        >
        </VideoItemVX>
      </swiper-item>
    </template>
  </swiper>
</template>

<script>
import { getShorVideoCommonList } from '@/api/modules/career';

import { VideoItemVX } from './components/VideoItemVX';

let touchArr = [];

export default {
  components: {
    VideoItemVX,
  },
  data() {
    return {
      indicatorDots: false, // 是否显示面板指示点
      autoplay: false, // 是否自动切换
      vertical: true, // 滑动方向是否为纵向
      duration: 800,
      circular: false, // 是否衔接滑动
      current_: 0, // 当前所在视频的 index
      videoIndex: 0, // 维护的视屏下标
      videoListAll:[], // 数据源
      total: 0, // 视频总条数
      isTwo: false, // 初始的时候是否请求了两次
      isSuccess: true, // 请求是否失败
      touchDirection: '', // 滑动方向
      current0: '', // 上一个swiper下标
      isRequest: false, // 是否在请求数据
      videoIdFX: '',
      videoImageFile: '',
      title: '',
      isLoading: false,
    }
  },
  watch: {
    videoIndex(val) {
      // 维护数组
      let videoIndex_ = this.videoIndex % 10;
      let index_ = parseInt(this.videoIndex / 10);
      // 判断是否衔接
      this.isCircular(videoIndex_);
      // 加载数据
      if(this.touchDirection == 'up' && videoIndex_ == 4) {// 第5个加载数据
        if(!this.videoListAll[index_ + 1]) { // 如果有数据就不加载了
          this.videoList(index_);
        }
      }
      // 请求失败时第九个再次请求
      if(this.touchDirection == 'up' && videoIndex_ == 8) {
        if(!this.videoListAll[index_+1] && !this.isSuccess) {// 如果有数据就不加载了
          this.videoList(index_);
        }
      }
      // 分享参数
      let detail = this.videoListAll[index_][videoIndex_];
      if(detail) {
        this.videoIdFX = detail.articleId;
        this.title = detail.title;
        this.videoImageFile = detail.info;
      }

      // 标记上一个下标
      this.current0 = this.videoIndex % 10;
      this.current_ = videoIndex_;
    }
  },
  methods: {
    // 页面初始化
    async initPage() {
      if(this.videoIndex % 10 === 0 && Number(this.pageNum) > 1) {
        this.pageNum = Number(this.pageNum) - 1;
      };
      this.videoList();
    },
    // 获取视频列表
    videoList(index) {
      if(this.isRequest) return;

      this.isRequest = true;
      this.isSuccess = false;
      const params = {
        pageNo: this.pageNum,
        pageSize: 10,
      };
      getShorVideoCommonList(params).then(res => {
        if(res.code == 200) {
          let videoListAll = res.data;
          this.isLoading = true;
          this.videoListAll[Number(this.pageNum)-1] = videoListAll;
          // 处理视频顺序
          index = index || Number(this.pageNum)-1;
          if(!this.isTwo && this.pageNum >= this.option.pageNum) {
            this.videoListAll[index].map((item, index) => {
              if(item.videoId == this.videoId) {
                this.current_ = index;
                this.videoIndex = index + (Number(this.pageNum)-1) * 10;
                this.current0 = index;
                this.title = item.title;
                this.videoImageFile = item.info;
                this.videoid = '';
              }
            });
            if(this.pageNum > this.option.pageNum) this.isTwo = true;
          };
          this.total = this.total + videoListAll.length;
          this.pageNum = Number(this.pageNum) + 1;
          this.isSuccess = true;
          this.isRequest = false;
          if(!this.isTwo) {
            this.videoList();
          }
          this.isCircular(this.videoIndex % 10); // 请求成功再调用一次衔接判断
        } else {
          this.isSuccess = false;
          uni.showToast({
            title: res.status_desc,
            icon: 'none'
          });
          this.isLoading = true;
        }
      }).finally(() => {
        this.isRequest = false;
      })
    },
    transition(event) {
      // 在export default外定义一个数组 touchArr
      // <script>
      // let touchArr = []
      // export default {}
      // <script/>
      touchArr.push(event.detail.dy);
      if(touchArr.length > 1) {
        if(touchArr[touchArr.length-1] - touchArr[touchArr.length-2] > 0) {
          this.touchDirection = "up"
        } else {
          this.touchDirection = "down"
        }
      }
    },
    change(event) {
      touchArr = [];
      if(this.touchDirection == 'down') {
        this.videoIndex--;
      } else if(this.touchDirection == 'up') {
        this.videoIndex++;
        this.circular = false; // 每次videoIndex改变先设为false
      }

      // 防止维护的下标为负时白屏
      if(this.videoIndex < 0) {
        this.videoIndex = 0;
        this.current_ = 0;
      }
      // 防止维护的下标大于总数时白屏
      if(this.videoIndex >= this.total) {
        this.videoIndex = this.total - 1;
        this.current_ = this.total -1;
      } else {
        // 修正swiper下标
        this.current_ = this.videoIndex % 10;
      }
    },
    videoAnimationfinish(event) {
      // 如果在请求中，swiper不做首尾衔接
      if(this.isRequest) {
        this.circular = false; // 不衔接
        uni.showToast({
          title: '加载中',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      // 没有数据了
      if(this.videoIndex == this.total-1) {
        uni.showToast({
          title: '没有更多了',
          icon: 'none',
          duration: 1000
        });
      }
    },
    isCircular(type) {
      // 1、维护的下标小于等于0时
      if(this.videoIndex <= 0) {
        this.circular = false;
        return;
      };
      // 2、维护的下标大于等于总数时
      if(this.videoIndex >= this.total-1) {
        this.circular = false;
        return;
      };
      // 3、总数小于等于10时
      if(this.total <= 10) {
        this.circular = false;
        return;
      };
      // 4、总数大于10
      if(type == 0) {
        this.circular = true;
        return;
      } else if(type == 9) {
        this.circular = true;
        return;
      } else {
        this.circular = false;
      };
    },
  }
}
</script>

<style>

</style>